import React, { useMemo } from 'react';
import PlaylistPlayer from './components/PlaylistPlayer/PlaylistPlayer';
import RadioPlayer from './components/RadioPlayer/RadioPlayer';
import { useAppDispatch, useAppSelector } from './redux/hooks';
import { setPlayerStatus } from './redux/slices/generalSlice';
import { setShuffleStatus } from './redux/slices/playerSlice';
import './scss/app.scss';

function App() {
  const audio = useMemo(() => new Audio(), []);

  const dispatch = useAppDispatch();
  const playerStatus = useAppSelector((state) => state.general.playerStatus);
  const radioSrc = useAppSelector((state) => state.radio.src);
  const currentSong = useAppSelector((state) => state.player.currentSong);

  const changeStatusHandler = (param: string) => {
    audio.pause()
    if (param === 'radio') {
      dispatch(setPlayerStatus('radio'));
      audio.src = radioSrc;
    } else if (param === 'playlist') {
      dispatch(setPlayerStatus('playlist'));
      dispatch(setShuffleStatus('off'))
      audio.src = currentSong.url;
    }
  };

  return (
    <div
      className="bg_img"
      // style={{
      //   background:
      //     'linear-gradient(359.73deg, #2B2B2B -28.45%, #000000 114.94%)',
      // }}
    >
      <div className="content">
        <div className="player-switcher">
          <button
            className={playerStatus === 'radio' ? 'radio' : 'radio disabled'}
            onClick={() => changeStatusHandler('radio')}
          >
            Radio
          </button>
          <button
            className={
              playerStatus === 'playlist' ? 'player' : 'player disabled'
            }
            onClick={() => changeStatusHandler('playlist')}
          >
            Playlist
          </button>
        </div>
        {playerStatus === 'playlist' && <PlaylistPlayer audio={audio} />}
        {playerStatus === 'radio' && <RadioPlayer audio={audio} />}
        <div className="link_buttons">
          <a
            href="https://steamcommunity.com/groups/TotalenKrieginc"
            className="steam-link"
            target="_blank"
            rel="noreferrer"
            aria-label="Steam Link"
          >
            <svg
              width="42"
              height="42"
              viewBox="0 0 42 42"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clipPath="url(#clip0_318_104)">
                <path
                  d="M20.9658 0C9.93952 0 0.895087 8.50369 0.0406494 19.3121L11.2927 23.9676C12.2799 23.2943 13.4473 22.9347 14.6422 22.9359C14.7511 22.9359 14.8614 22.9425 14.9703 22.9425L19.9749 15.6962V15.5938C19.9749 11.2258 23.5226 7.67812 27.8906 7.67812C32.2586 7.67812 35.8128 11.2324 35.8128 15.6004C35.8101 17.7 34.9743 19.7128 33.489 21.1969C32.0037 22.6809 29.9902 23.515 27.8906 23.5161H27.7134L20.576 28.6086C20.576 28.7044 20.5826 28.7936 20.5826 28.8894C20.5826 32.1707 17.93 34.8298 14.6488 34.8298C11.7915 34.8298 9.37121 32.7784 8.81734 30.0589L0.765149 26.7225C3.26021 35.5412 11.3478 42.0013 20.9658 42.0013C32.5591 42.0013 41.9593 32.6025 41.9593 21.0013C41.9593 9.40012 32.5605 0.0013125 20.9658 0.0013125V0ZM13.1932 31.8688L10.6155 30.8018C11.0902 31.788 11.9096 32.5663 12.9189 32.9897C14.0114 33.442 15.2387 33.4427 16.3317 32.9918C17.4248 32.5408 18.2945 31.6749 18.7503 30.5839C18.9765 30.0438 19.0935 29.4644 19.0946 28.8789C19.0957 28.2935 18.9809 27.7136 18.7569 27.1727C18.5359 26.6289 18.2085 26.1348 17.7941 25.7192C17.3796 25.3036 16.8863 24.9749 16.3432 24.7524C15.2967 24.3153 14.1225 24.2956 13.062 24.6973L15.7211 25.7985C17.3958 26.502 18.1886 28.4235 17.4916 30.0982C16.7947 31.773 14.8666 32.5658 13.1919 31.8688H13.1932ZM33.1681 15.5859C33.1668 14.1878 32.6112 12.8472 31.6232 11.858C30.6352 10.8687 29.2953 10.3115 27.8971 10.3084C26.4974 10.3084 25.1551 10.8644 24.1653 11.8541C23.1756 12.8439 22.6196 14.1862 22.6196 15.5859C22.6196 16.9856 23.1756 18.328 24.1653 19.3177C25.1551 20.3075 26.4974 20.8635 27.8971 20.8635C29.2956 20.8614 30.6361 20.3045 31.6243 19.315C32.6126 18.3256 33.1678 16.9844 33.1681 15.5859ZM23.9465 15.5794C23.9465 13.3849 25.7171 11.6143 27.905 11.6143C30.093 11.6143 31.8766 13.3849 31.8766 15.5794C31.8766 17.7673 30.093 19.5444 27.905 19.5444C25.7171 19.5444 23.9465 17.7673 23.9465 15.5794Z"
                  fill="white"
                />
              </g>
              <defs>
                <clipPath id="clip0_318_104">
                  <rect width="42" height="42" fill="white" />
                </clipPath>
              </defs>
            </svg>
          </a>
          <a
            href="https://vk.com/heathercs"
            className="vk-link"
            target="_blank"
            rel="noreferrer"
            aria-label="VK Link"
          >
            <svg
              width="42"
              height="42"
              viewBox="0 0 42 42"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clipPath="url(#clip0_318_106)">
                <path
                  d="M21 0.840088C9.86583 0.840088 0.840027 9.86589 0.840027 21.0001C0.840027 32.1343 9.86583 41.1601 21 41.1601C32.1342 41.1601 41.16 32.1343 41.16 21.0001C41.16 9.86589 32.1342 0.840088 21 0.840088ZM28.7532 23.5852C28.7532 23.5852 30.5361 25.345 30.975 26.1619C30.9876 26.1787 30.9939 26.1955 30.9981 26.2039C31.1766 26.5042 31.2186 26.7373 31.1304 26.9116C30.9834 27.2014 30.4794 27.3442 30.3072 27.3568H27.1572C26.9388 27.3568 26.481 27.3001 25.9266 26.9179C25.5003 26.6197 25.0803 26.1304 24.6708 25.6537C24.0597 24.9439 23.5305 24.3307 22.9971 24.3307C22.9294 24.3306 22.862 24.3412 22.7976 24.3622C22.3944 24.4924 21.8778 25.0678 21.8778 26.6008C21.8778 27.0796 21.4998 27.3547 21.2331 27.3547H19.7904C19.299 27.3547 16.7391 27.1825 14.4711 24.7906C11.6949 21.8611 9.19593 15.9853 9.17493 15.9307C9.01743 15.5506 9.34293 15.3469 9.69783 15.3469H12.8793C13.3035 15.3469 13.4421 15.6052 13.5387 15.8341C13.6521 16.1008 14.0679 17.1613 14.7504 18.3541C15.8571 20.2987 16.5354 21.0883 17.0793 21.0883C17.1813 21.0871 17.2815 21.0611 17.3712 21.0127C18.081 20.6179 17.9487 18.0874 17.9172 17.5624C17.9172 17.4637 17.9151 16.4305 17.5518 15.9349C17.2914 15.5758 16.8483 15.4393 16.5795 15.3889C16.6883 15.2388 16.8317 15.117 16.9974 15.034C17.4846 14.7904 18.3624 14.7547 19.2339 14.7547H19.719C20.664 14.7673 20.9076 14.8282 21.2499 14.9143C21.9429 15.0802 21.9576 15.5275 21.8967 17.0584C21.8778 17.4931 21.8589 17.9845 21.8589 18.5641C21.8589 18.6901 21.8526 18.8245 21.8526 18.9673C21.8316 19.7464 21.8064 20.6305 22.3566 20.9938C22.4284 21.0388 22.5113 21.0628 22.596 21.0631C22.7871 21.0631 23.3625 21.0631 24.9207 18.3898C25.4013 17.5293 25.8189 16.6352 26.1702 15.7144C26.2017 15.6598 26.2941 15.4918 26.4033 15.4267C26.4839 15.3856 26.5733 15.3647 26.6637 15.3658H30.4038C30.8112 15.3658 31.0905 15.4267 31.143 15.5842C31.2354 15.8341 31.1262 16.5964 29.4189 18.9085L28.6566 19.9144C27.1089 21.943 27.1089 22.0459 28.7532 23.5852Z"
                  fill="white"
                />
              </g>
              <defs>
                <clipPath id="clip0_318_106">
                  <rect width="42" height="42" fill="white" />
                </clipPath>
              </defs>
            </svg>
          </a>
          <a
            href="https://discord.com/invite/txj6Crk"
            className="discord-link"
            target="_blank"
            rel="noreferrer"
            aria-label="Discord Link"
          >
            <svg
              width="42"
              height="42"
              viewBox="0 0 42 42"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clipPath="url(#clip0_318_108)">
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0C9.40202 0 0 9.40202 0 21C0 32.598 9.40202 42 21 42ZM16.5804 9.10197L17.4171 9L17.7182 9.77993C17.7182 9.77993 18.0279 10.5718 18.2207 11.4754C19.4357 11.3094 20.4268 11.2715 21 11.2715C21.9298 11.2786 22.8582 11.3467 23.7793 11.4754C23.9711 10.5718 24.2807 9.77993 24.2807 9.77993L24.5829 9L25.4196 9.10197C25.4196 9.10197 29.175 9.51742 31.9146 11.7455H31.9489L31.9821 11.7802C32.5663 12.3232 32.8373 12.9846 33.2257 13.9327C33.2462 13.9828 33.267 14.0336 33.2882 14.0853C33.7871 15.3238 34.2118 16.5916 34.56 17.8819C35.355 20.7923 36 24.3177 36 27.5426V27.8138L35.8661 28.085C34.8739 29.8477 33.1125 30.9704 31.4796 31.746C29.8479 32.5216 28.4368 32.9327 27.4618 32.9664L26.8264 33L26.4911 32.424L25.3189 30.3218C24.0761 30.606 22.6446 30.7969 21 30.7969C19.3554 30.7969 17.9239 30.606 16.6811 30.3218L15.5089 32.424L15.1746 33L14.5382 32.9664C13.5632 32.9327 12.1521 32.5216 10.5204 31.746C8.8875 30.9704 7.12607 29.8477 6.13393 28.085L6 27.8138V27.5426C6 24.3177 6.645 20.7923 7.44 17.8819C7.78821 16.5916 8.21291 15.3238 8.71179 14.0853C8.73373 14.0319 8.75526 13.9794 8.77644 13.9277C9.16371 12.9832 9.43475 12.3222 10.0179 11.7791L10.0521 11.7466H10.0843C12.8261 9.51742 16.5804 9.10197 16.5804 9.10197ZM16.053 11.8089C16.0181 11.7066 15.981 11.5977 15.9439 11.4754C14.9443 11.6782 13.035 12.1447 11.4579 13.4073C11.4597 13.4082 11.4429 13.4367 11.412 13.4893C11.2957 13.6871 10.9786 14.2266 10.6875 14.9325C10.228 16.0829 9.83695 17.2601 9.51643 18.4579C8.79107 21.1058 8.22214 24.3307 8.17714 27.1695C8.85 28.2119 10.1014 29.1524 11.4236 29.7794C12.2536 30.1772 13.1319 30.4625 14.0357 30.6277L14.5714 29.7121C14.2532 29.5939 13.9393 29.4626 13.6671 29.339C12.0182 28.6057 11.1225 27.8138 11.1225 27.8138L12.5293 26.1867C12.5293 26.1867 13.1314 26.7464 14.5382 27.3734C15.9439 28.0004 18.0911 28.6274 21 28.6274C23.9089 28.6274 26.0571 28.0004 27.4618 27.3734C28.8686 26.7464 29.4707 26.1867 29.4707 26.1867L30.8775 27.8138C30.8775 27.8138 29.9818 28.6057 28.3329 29.339C28.0607 29.4626 27.7468 29.5928 27.4286 29.7121L27.9643 30.6266C28.8676 30.462 29.7455 30.1775 30.5754 29.7805C31.8986 29.1524 33.1489 28.2119 33.8239 27.1695C33.7779 24.3307 33.2089 21.1058 32.4846 18.4579C32.1075 17.077 31.6896 15.8523 31.3125 14.9325C31.0214 14.2266 30.7043 13.6871 30.588 13.4893C30.5571 13.4367 30.5403 13.4082 30.5421 13.4073C28.965 12.1447 27.0557 11.6782 26.0561 11.4743C26.0169 11.6043 25.9778 11.7186 25.9412 11.8252C25.9348 11.8441 25.9284 11.8627 25.9221 11.8811C27.3075 12.2293 28.785 12.7586 30.1404 13.6102L29.0025 15.4412C26.2232 13.6948 22.23 13.4409 21 13.4409C19.7689 13.4409 15.7768 13.6948 12.9975 15.4412L11.8596 13.6102C13.215 12.7586 14.6925 12.2293 16.0779 11.8822C16.0697 11.8581 16.0614 11.8337 16.053 11.8089ZM15.2411 19.9494C15.6889 19.3431 16.4218 18.8647 17.25 18.8647C18.0782 18.8647 18.8111 19.3431 19.2589 19.9494C19.7068 20.5558 19.9286 21.301 19.9286 22.1189C19.9286 22.9368 19.7068 23.682 19.2589 24.2884C18.8111 24.8948 18.0782 25.3732 17.25 25.3732C16.4218 25.3732 15.6889 24.8948 15.2411 24.2884C14.7932 23.682 14.5714 22.9368 14.5714 22.1189C14.5714 21.301 14.7932 20.5558 15.2411 19.9494ZM22.7411 19.9494C23.1889 19.3431 23.9218 18.8647 24.75 18.8647C25.5782 18.8647 26.3111 19.3431 26.7589 19.9494C27.2068 20.5558 27.4286 21.301 27.4286 22.1189C27.4286 22.9368 27.2068 23.682 26.7589 24.2884C26.3111 24.8948 25.5782 25.3732 24.75 25.3732C23.9218 25.3732 23.1889 24.8948 22.7411 24.2884C22.2932 23.682 22.0714 22.9368 22.0714 22.1189C22.0714 21.301 22.2932 20.5558 22.7411 19.9494ZM17.5179 21.2381C17.3839 21.0559 17.3089 21.0342 17.25 21.0342C17.1911 21.0342 17.1161 21.0559 16.9821 21.237C16.8482 21.4193 16.7143 21.7371 16.7143 22.1189C16.7114 22.4335 16.805 22.7413 16.9821 22.9997C17.1161 23.182 17.1911 23.2037 17.25 23.2037C17.3089 23.2037 17.3839 23.182 17.5179 23.0008C17.6518 22.8186 17.7857 22.5007 17.7857 22.1189C17.7857 21.7371 17.6518 21.4193 17.5179 21.2381ZM25.0179 21.2381C24.8839 21.0559 24.8089 21.0342 24.75 21.0342C24.6911 21.0342 24.6161 21.0559 24.4821 21.237C24.3482 21.4193 24.2143 21.7371 24.2143 22.1189C24.2114 22.4335 24.305 22.7413 24.4821 22.9997C24.6161 23.182 24.6911 23.2037 24.75 23.2037C24.8089 23.2037 24.8839 23.182 25.0179 23.0008C25.1518 22.8186 25.2857 22.5007 25.2857 22.1189C25.2857 21.7371 25.1518 21.4193 25.0179 21.2381Z"
                  fill="white"
                />
              </g>
              <defs>
                <clipPath id="clip0_318_108">
                  <rect width="42" height="42" fill="white" />
                </clipPath>
              </defs>
            </svg>
          </a>
        </div>
      </div>
    </div>
  );
}

export default App;
